<template>
	<view class="contentbox">
		<view class="header">
			<view class="userinfo flex align-center">
				<view class="padding-lg margin-xs radius" style="position:relative;">
					<image src="../../static/user.png" mode=""></image>
					<button class="cu-btn round sm">领券用户</button>
				</view>
				<view class="radius" style="width: 100%;">
					<view style="display:flex;flex-wrap:wrap;">
						<view class="tui" @tap="tologin" style="">
							<text>退出登录</text>
							<image src="../../static/tuichu.png" mode=""></image>
						</view>
						<text class="username">{{ username }}</text>
					</view>
					<view class="margin-top-sm">每日有惊喜，精彩福利领不停</view>
				</view>
			</view>
		</view>
		<view class="card-item bg-white radius" style="padding-bottom:30px;">
			<scroll-view scroll-x class="nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub text-black current" data-id="1"><text>已兑换</text></view>
					<view class="cu-item flex-sub" data-id="2"><text>已使用</text></view>
					<view class="cu-item flex-sub" data-id="3"><text>已过期</text></view>
				</view>
			</scroll-view>

			<view class="card-item-content uni-flex uni-row" style="margin:10px auto;">
				<view class="list-item list-item1" v-for="(item, id) in list" :key="id" :data-item="item.url" @tap="showModal" data-target="Image">
					<view class="list-item-box" :style="{ backgroundImage: 'url(' + item.image + ')' }" style="background-size: contain;">
						<text class="text-bold text-black">
							{{ item.name }}
							<!-- {{item.price}}元兑换券 -->
						</text>
						<!-- 	<view>
							有效期至2020-3-20
							<br />
							满120可用
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="bg-img">
					<view class="cu-bar justify-end text-white">
						<view class="action" @tap="hideModal"><text class="cuIcon-close "></text></view>
					</view>
					<view class="dialogbox"></view>
					<view class="mainTitle">请出示此码给商家进行兑换</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var api = require('../../api/api.js');
export default {
	data() {
		return {
			username: '',
			modalName: null,
			TabCur: 0,
			scrollLeft: 0,
			list: []
		};
	},

	onLoad() {
		setTimeout(function() {
			console.log('start pulldown');
		}, 1000);
		//uni.startPullDownRefresh();
		uni.startPullDownRefresh({
			success: function(res) {
				console.log(res); //success 返回参数说明
			}
		});
	},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 10);
	},
	mounted() {
		this.isquan();
	},
	methods: {
		isquan() {
			this.username = uni.getStorageSync('username');
			uni.request({
				url: api.My,
				method: 'post',
				data: {
					desc: uni.getStorageSync('username')
				},
				success: res => {
					if (res.data.errmsg == '成功') {
						this.list = res.data.data.quanList;
						console.log(this.list);
					}
				}
			});
		},
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.modalName = null;
			location.reload();
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		},
		isLogin() {
			const username = uni.getStorageSync('username');
			this.username = username;
		},
		tologin() {
			var storage = window.localStorage;
			storage.clear();
			uni.navigateTo({
				url: '../../pages/index/login'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
$item-margin-bottom: 30upx;

$item-margin-side: 20upx;
$line-color: #f9f9f9;
$border-color: #aa833e;
page {
	background-color: #f6f6f6;
}
.contentbox {
	background: url(../../static/bg_my.png) no-repeat center top;
	background-size: contain;
}
.header {
	color: $uni-text-color-inverse;
	margin-bottom: $item-margin-bottom;
	position: relative;
	.img-profile {
		image {
			width: 150upx;
			height: 150upx;
			border-radius: 50%;
			vertical-align: middle;
		}
	}
	.tui {
		border-top-left-radius: 30upx;
		border-bottom-left-radius: 30upx;
		background-color: #345dfe;
		width: 150upx;
		height: 50upx;
		margin-left: 70%;
	}
	.tui text {
		margin-top: 10upx;
		float: right;
		font-size: 20upx;
	}
	.tui image {
		margin-top: 10upx;
		float: right;
		width: 30upx;
		height: 30upx;
	}
	.usertag {
		padding: 0 20upx;
		background-color: #cb9a5c;
		border-radius: 30upx;
		font-size: 24upx;
		margin-right: 20upx;
		border: 1px solid $border-color;
		line-height: 1.6;
	}
	.nikename {
		font-size: 30upx;
		margin-bottom: 10upx;
		.usertag {
			margin-left: 20upx;
			border: none;
			display: inline-block;
		}
	}
	.setting-btn {
		width: 60upx;
		height: 60upx;
		position: absolute;
		top: 40upx;
		right: 40upx;
	}
}
.card-item {
	background-color: #fff;
	border-radius: 20upx;
	margin: 0 $item-margin-side $item-margin-bottom $item-margin-side;
	text-align: center;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
}
.userinfo image {
	width: 150upx;
	height: 150upx;
}
.userinfo .username {
	font-size: 18px;
	font-weight: 700;
}
.userinfo button {
	position: absolute;
	bottom: 10px;
	left: 25px;
	background: linear-gradient(0deg, rgba(12, 98, 255, 1), rgba(69, 151, 255, 1));
	box-shadow: 0px 2px 2px 0px rgba(33, 85, 255, 1);
	border-radius: 15px;
	color: #fff;
}
.list-item {
	height: 76px;
	width: 285px;
	border: 1px dashed #ccc;
	margin: 20px auto;
}
.list-item1 {
	background: url(../../static/quanBg1.png) center right no-repeat;
}
.list-item2 {
	background: url(../../static/quanBg2.png) center right no-repeat;
}
.list-item3 {
	background: url(../../static/quanBg3.png) center right no-repeat;
}
.list-item-box {
	height: 76px;
	width: 285px;
	padding-left: 80px;
	background-repeat: no-repeat;
	text-align: left;
	padding-top: 10px;
	background-position: 1px;
}
.nav {
	padding-top: 10px;
}
.cu-item {
	font-family: PingFang SC;
	font-weight: bold;
}
.cu-item.current text {
	border-bottom: 3px solid #4495fd;
	border-radius: 3px;
}
.dialogbox {
	background-image: url('../../static/codex.png');
	height: 207px;
	width: 207px;
	margin: 0 auto;
	border: 15px solid #fff;
	border-radius: 5px;
}
.cu-dialog {
	background: none;
}
.mainTitle {
	margin-top: 20px;
	color: #fff;
}
</style>
